<template>
  <div
    class="mind-message"
    :style="center ? centerPosition : position"
  >
    <template v-if="layoutConfig.showSmart">
      <p
        v-for="(item,index) in message"
        :key="index"
        :style="{
          'font-size': typeof fontSize === 'string' ? fontSize : fontSize + 'px',
          'color': color,
          'text-align': textAlign
        }"
        v-html="item"
      />
    </template>
  </div>
</template>

<script>
import { defaultState } from '../../../../mixins'

export default {
  name: 'MindMessage',
  mixins: [defaultState],
  props: {
    message: {
      type: Array,
      default: () => []
    },
    center: {
      type: Boolean,
      default: false
    },
    position: {
      type: Object,
      default: () => {
        return {
          right: 0,
          bottom: 0
        }
      }
    },
    fontSize: {
      type: String | Number,
      default: '12px'
    },
    color: {
      type: String,
      default: 'red'
    },
    textAlign: {
      type: String,
      default: 'right'
    }
  },
  data() {
    return {
      centerPosition: {
        left: '50%',
        top: '50%',
        transform: 'translate(-50%, -50%)'
      }
    }
  }
}
</script>

<style scoped lang="scss">
.mind-message {
  position: absolute;
  padding: 35px 20px;

  p {
    user-select: none;
  }
}
</style>